import { BookAIcon, CoinsIcon, HomeIcon } from "lucide-react";
import { Outlet, useNavigate } from "react-router";
import SideMenu from "~/components/side-menu";

export default function Layout() {
  const navigate = useNavigate();

  return (
    <div className="flex">
      <SideMenu
        menuHeader={
          <div
            className="py-4 text-3xl"
            style={{
              textShadow: "0px 0px 5px #000",
            }}
            onClick={() => {
              navigate("/author");
            }}
          >
            作者后台
          </div>
        }
        menuList={[
          {
            label: "首页",
            path: "/author",
            icon: HomeIcon,
          },
          {
            label: "内容管理",
            path: "/author/content",
            icon: BookAIcon,
            children: [
              {
                label: "小说",
                path: "/author/content/novel",
              },
            ],
          },
          {
            label: "收益管理",
            path: "/author/coin",
            icon: CoinsIcon,
            children: [
              {
                label: "月收益",
                path: "/author/coin/month",
              },
            ],
          },
        ]}
      />
      <div className="flex h-screen flex-1 flex-col gap-4 overflow-hidden bg-gray-200 p-4">
        <div className="flex items-center gap-4">
          <div className="flex h-full flex-1 rounded-xl bg-white px-4 py-2">
            
          </div>
          <div className="rounded-full bg-white px-4 py-2">
            wuteng606@163.com
          </div>
        </div>
        <div className="flex flex-1 flex-col overflow-hidden rounded-xl bg-white p-4">
          <Outlet />
        </div>
      </div>
    </div>
  );
}
